<template>
  <div class="container">
    <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
    <!-- 中间部分 -->
    <div class="main-box">
      <div class="items">
        <span class="text">收货人姓名</span>
        <input type="text" v-model="name" />
      </div>
      <div class="items">
        <span class="text">联系电话</span>
        <input type="number" v-model="phone" />
      </div>
      <div class="items" @click="chooseArea">
        <span class="text">选择省 市 区</span>
        <input type="text" v-model="area" />
        <img :src="more" alt />
      </div>
      <div class="tips">
        <textarea
          name
          id
          v-model="desc"
          placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等区、楼栋号、单~"
          onkeyup="this.value=this.value.substring(0, 200)"
        ></textarea>
      </div>
      <div class="set-btn">
        <div class="left fs-32">设为默认地址</div>
        <div class="right" @click="setIndex = !setIndex">
          <img v-if="setIndex" :src="close" alt />
          <img v-else :src="open" alt />
        </div>
      </div>
    </div>
    <!-- 地区选择模态框 -->
    <div class="chooseArea" v-if="isShowArea">
      <div class="space-between padding-24">
        <p @click="isShowArea=false">取消</p>
        <p @click="surecity">确定</p>
      </div>
      <mt-picker :slots="myAddressSlots" @change="onMyAddressChange" class="city-picker"></mt-picker>
    </div>
    <!-- 底部按钮 -->
    <div class="bottom" @click="saveAddress">保存</div>
  </div>
</template>

<script>
import myaddress from "../../../static/address.json"; //引入省市区数据
export default {
  name: "edit-address",
  data() {
    return {
      title: "填写收货地址",
      isBack: true,
      more: require("@/assets/index/back-pic.png"),
      open: require("@/assets/index/set-open.png"),
      close: require("@/assets/index/set-close.png"),
      setIndex: true,
      name: "",
      phone: "",
      area: "",
      desc: "",
      isShowArea: false,
      myAddressSlots: [
        {
          flex: 1,
          defaultIndex: 8,
          values: Object.keys(myaddress), //省份数组
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: [],
          className: "slot5",
          textAlign: "center"
        }
      ]
    };
  },
  components: {},
  methods: {
    // 点击了选择地区图标
    chooseArea() {
      this.isShowArea = true;
    },
    // 点击了确定按钮
    surecity() {
      this.isShowArea = false;
      if (this.myaddress[0] && this.myaddress[1] && this.myaddress[2]) {
        this.area = `${this.myaddress[0]}${this.myaddress[1]}${
          this.myaddress[2]
        }`;
      } else {
        this.AlertWin("请选择正确的区域！");
      }

      //this.area=this.myaddress
    },
    // 选择地区
    onMyAddressChange(picker, values) {
      if (myaddress[values[0]]) {
        //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
        picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
        picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
        this.myaddress = values;
      }
    },
    saveAddress() {
      if (!this.name) {
        this.AlertWin("请填写收货人姓名");
        return;
      }
      if (!this.phone) {
        this.AlertWin("请填写联系电话");
        return;
      }
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
      if (reg.test(this.phone)) {
      } else {
        this.AlertWin("请输入正确的手机号格式");
        return;
      }
      if (!this.area) {
        this.AlertWin("请选择地区信息");
        return;
      }
      if (!this.desc) {
        this.AlertWin("请填写详细地址信息");
        return;
      }
    }
  },
  created() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  box-sizing: border-box;
  .main-box {
    flex-grow: 8;
    margin-top: 0.24rem;
    .items {
      display: flex;
      position: relative;
      background-color: #fff;
      font-size: 0.32rem;
      font-weight: 500;
      color: rgba(68, 68, 68, 1);
      padding: 0 0.23rem;
      height: 1rem;
      line-height: 1rem;
      box-sizing: border-box;
      border-bottom: 0.015rem solid #e9e9e9;
      span {
        width: 1.8rem;
      }
      input {
        text-indent: 0.3rem;
      }
      img {
        position: absolute;
        width: 0.17rem;
        height: 0.3rem;
        right: 0.25rem;
        top: 0.35rem;
      }
    }
    .tips {
      line-height: 0.48rem;
      background-color: #fff;
      padding: 0.15rem 0.25rem 0.2rem;
      box-sizing: border-box;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      textarea {
        width: 100%;
        padding-top: 0.3rem;
        line-height: 0.48rem;
        box-sizing: border-box;
        border: 0;
        outline: none;
        resize: none;
        textarea:focus {
          border: 0;
        }
      }
    }

    .set-btn {
      height: 1rem;
      display: flex;
      padding: 0 0.24rem;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin-top: 0.24rem;
      .left {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
      }
      .right {
        img {
          width: 0.88rem;
          height: 0.46rem;
        }
      }
    }
  }
  .bottom {
    width: 7.02rem;
    height: 0.7rem;
    color: #fff;
    text-align: center;
    line-height: 0.7rem;
    background: rgba(84, 4, 121, 1);
    border-radius: 0.4rem;
    margin: 0 auto;
    margin-bottom: 0.11rem;
  }

  // 地区选择模态框
  .chooseArea {
    position: fixed;
    z-index: 999;
    background-color: #fff;
    bottom: 0;
    width: 100%;
    height: 5rem;
    overflow: hidden;
    box-shadow: 0rem 0rem 0.1rem 0rem rgba(172, 172, 172, 0.23);
    .space-between {
      height: 0.8rem;
      color: rgba(84, 4, 121, 1);
      border-bottom: 0.01rem solid #e9e9e9;
    }
  }
}
</style>
